<!-- 物资管理主页 -->
<template>
  <div class="assets-home">
    <el-tabs class="home-tabs" v-model="activeTab">
      <el-tab-pane label="固定物资" name="fixed" />
      <el-tab-pane label="消耗品物资" name="consumable" />
    </el-tabs>
    <FixedAssetsPanel :refreshKey="activeTab" v-show="activeTab === 'fixed'" />
    <ConsumableAssetsPanel :refreshKey="activeTab" v-show="activeTab === 'consumable'" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import FixedAssetsPanel from './components/FixedAssetsPanel.vue'
import ConsumableAssetsPanel from './components/ConsumableAssetsPanel.vue'
defineOptions({
  name: 'AssetsHome'
})
const activeTab = ref('fixed')
</script>

<style scoped lang="scss">
.assets-home {
  min-height: $content-height;

  .home-tabs {
    // :deep(.el-tabs--border-card) {
    //   border: none;
    //   border-radius: 8px;
    //   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    // }

    :deep(.el-tabs__header) {
      padding: 0 16px 10px;
      background-color: #fff;
      border-radius: 8px;
    }

    :deep(.el-tabs__nav-wrap::after) {
      display: none;
    }
    // :deep(.el-tabs__item) {
    //   height: 50px;
    //   font-size: 16px;
    //   font-weight: 500;
    //   line-height: 50px;
    // }

    :deep(.el-tabs__content) {
      padding: 0;
      background-color: transparent;
      border-radius: 8px;
    }
  }
}
</style>
